<script setup lang="ts">
import { ref } from "vue"
import Basics from "./components/Basics.vue"
import RiskSignature from "./components/RiskSignature.vue"
import Signature from "./components/Signature.vue"

const active = ref(0)
const CraneOperationId = ref("")
const changState = function (value: { state: number; id: string }) {
  if (value.state) {
    active.value = value.state
  }
  if (value.id) {
    CraneOperationId.value = value.id
  }
}
</script>

<template>
  <div class="w-full h-full bg-gray-200">
    <div class="w-full h-[95%]">
      <div class="w-full h-[10%] font-bold flex justify-center items-center text-3xl">
        吊装作业许可证
      </div>
      <el-card class="w-full h-[90%] p-5">
        <div class="w-full h-[10%] flex justify-center">
          <el-steps style="width: 70%" :active="active" align-center finish-status="success">
            <el-step title="基础信息" />
            <el-step title="风险措施" />
            <el-step title="签字" />
          </el-steps>
        </div>
        <div class="w-full h-[90%]">
          <Basics v-if="active == 0" :id="CraneOperationId" @chang-state="changState" />
          <RiskSignature v-if="active == 1" :id="CraneOperationId" @chang-state="changState" />
          <Signature v-if="active == 2" :id="CraneOperationId" @chang-state="changState" />
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped></style>
